<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="中间库任务名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taskCode">
                            <a-input v-model="model.taskCode" placeholder="请输入中间库任务名" disabled></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="外围系统接口号" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="interfaceCode">
                            <a-input v-model="model.exoServerCode" placeholder="请输入外围系统接口号"
                                     @click="exoServerPopOpen"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
                            <a-input v-model="model.status" placeholder="请输入状态" disabled></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </j-form-container>
        <exo-server-list-pop ref="exoServerPopModal" @ok="exoServerPopOk"></exo-server-list-pop>
    </a-spin>
</template>

<script>

    import { httpAction } from '@/api/manage'
    import ExoServerListPop from '../plugins/MsiExoServerListPop'

    export default {
        name: 'MsiTaskExoServerForm',
        components: {
            ExoServerListPop
        },
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                model: {},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
                confirmLoading: false,
                validatorRules: {},
                url: {
                    edit: '/msibase/msiWsServerTask/edit',
                }
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            },
        },
        created() {
            //备份model原始值
            this.modelDefault = JSON.parse(JSON.stringify(this.model))
        },
        methods: {
            add() {
                this.edit(this.modelDefault)
            },
            edit(record) {
                this.model = Object.assign({}, record)
                this.visible = true
            },
            submitForm() {
                const that = this
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        httpAction(httpurl, this.model, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
            exoServerPopOpen() {
                this.$refs.exoServerPopModal.title = '外围系统服务选择'
                this.$refs.exoServerPopModal.hide()
            },
            exoServerPopOk(rows) {
                let row = rows[0]
                this.model = Object.assign({}, this.model, {
                    exoServerId: row.id,
                    exoServerCode: row.exoServerCode
                })

            },
        }
    }
</script>
